<template>
  <div id="wordsOrderDraw" class="words-draw-render"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from "vue-router"
import cnchar from 'cnchar';
import draw from 'cnchar-draw';
const router = useRouter()
const wordsDraw = ref(null)
/**
 * 重置资源
 */
cnchar.setResourceBase('https://file.web-jshtml.cn/uploads/times/cnchar-data/')
/**
 * state
 */
const state = reactive({
  words: router.currentRoute.value.query.words,
  size: router.currentRoute.value.query.size || 60,
})
/**
 * draw
 */
const drawRender = () => {
  wordsDraw.value = cnchar.draw(state.words, {
    el: '#wordsOrderDraw',
    type: cnchar.draw.TYPE.STROKE,
    style: {
        length: state.size,
        strokeColor: '#000',
        currentColor:" #000"
    }
  });
}
onMounted(() => {
  drawRender()
})

</script>
<style lang="scss"></style>
